<!--
        Copyright (c) 2023, LXMS (lxinet.cn).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img class="img" src="@img/logo.png"/>
        <span class="title" v-show="!collapsed">凌夕管理系统</span>
      </div>
      <left-menu></left-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
        <div class="rtHeader">
          <div class="list" v-if="orgInfo">
            <a class="ant-dropdown-link" href="javascript:void(0)" @click="changeOrg()">
              <bank-outlined/>
              {{ orgInfo.orgName }}
            </a>
          </div>
          <div class="list">
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" href="javascript:void(0)" @click.prevent>
                <user-outlined/>
                {{ userInfo.name }}
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0">
                    <a href="javascript:void(0)">待办事项</a>
                  </a-menu-item>
                  <a-menu-item key="1">
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>


          </div>
          <a-dropdown trigger="click">
            <a href="javascript:void(0)" class="ant-dropdown-link" @click.prevent>
              <span :class="[theme,'themeSquare']"></span>
              主题切换
              <DownOutlined/>
            </a>
            <template #overlay>
              <a-menu>
                <template v-for="item in themeData" :key="item">
                  <a-menu-item style="padding: 0">
                    <a href="javascript:void(0);"
                       :class="['themeList',item.themeName,item.themeName===theme?'active':'']"
                       @click="changeTheme(item)"></a>
                  </a-menu-item>
                </template>

              </a-menu>
            </template>
          </a-dropdown>


        </div>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <div class="contentBox">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Copyright ©2023 凌夕管理系统 LXMS
      </a-layout-footer>
    </a-layout>

  </a-layout>
</template>
<script>
import leftMenu from "./leftMenu.vue"

export default {
  name: "Layouts",
  components: {
    leftMenu,
  },

  data() {
    return {
      checked: false,
      userInfo: {},
      theme: "theme-blue",
      themeData: [
        {
          themeName: "theme-red",
          color: "#A81729"
        },
        {
          themeName: "theme-blue",
          color: "#1890FF"
        },
        {
          themeName: "theme-green",
          color: "#1BA8A7"
        }
      ],
      menuList: [],
      orgInfo: "",
      collapsed: false


    };
  },
  methods: {
    getUserInfo(){
      this.$request({
        url: "/system/auth/getUserInfo",
        method: "get",
        data: {},
      }).then((res) => {
        this.userInfo = res.data;
        this.$localStorage.set("permissions",res.data.permissions);
      }).finally(()=>{

      })
    },
    logout(){
      this.$localStorage.remove("permissions");
      this.$localStorage.remove("userInfo");
      this.$localStorage.remove("token");
      this.$localStorage.remove("menuList");
      window.location.href = "/login";
    },

    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
    handleClick({key}) {
      console.log(key)

    },
    changeTheme(item) {
      this.theme = item.themeName;
      this.$bus.emit("changeTheme", item);

    },

    changeOrg() {
      this.$refs.orgNode.isShow = true;
    },

  },
  mounted() {
    this.getUserInfo();
  }


};
</script>

<style lang="less" scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.contentBox {
  padding: 20px 0;
  background: #FFFFFF;
  margin-top: 15px;
  height: calc(100vh - 125px);
  .base-shadow(0px 3px 10px 0px rgba(180, 198, 221, 0.5));
  .base-radius(5px);
}

.logo {
  text-align: center;
  padding: 10px 0;

  .img {
    width: 30px;
    height: 30px;
  }

  .title {
    font-size: 16px;
    color: #ffffff;
    margin-left: 10px;
  }
}

.rtHeader {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 20px;

  .list {
    display: inline-block;
    margin-right: 15px;

    .anticon {
      padding-right: 3px;
      position: relative;
      top: -1px;
    }
  }

}
.ant-layout-footer{
  padding: 15px 50px;
}
.hideMenu {
  :deep(.tabsBox) {
    transition: all 0.2s;
    left: 20px;
  }

  :deep(.navBox) {
    display: none;
  }

  .viewBox {
    padding: 60px 16px 0 230px;
  }

}

.toggleBtn {
  position: relative;
  top: -2px;
}

.bgBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #f4f5f7;
  background-size: cover;
  z-index: -1;
}

.ant-dropdown-link {
  color: @text-color;
  font-size: 14px;

  .themeSquare {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: @themeDefaultColor;

    &.theme-blue {
      background: @themeBlueColor;
    }

    &.theme-green {
      background: @themeGreenColor;
    }
  }
}

.breadBox {
  background: rgba(250, 250, 250, 0.5);
  position: fixed;
  left: 220px;
  top: 50px;
  right: 0;
  padding: 5px 10px;
}

.viewBox {
  padding: 60px 16px 0 230px;
}

.theme-default {

}

.themeList {
  display: block;
  position: relative;
  padding: 7px 0;
  height: 30px;

  &:before {
    content: "";
    width: 12px;
    height: 12px;
    background: @themeDefaultColor;
    position: absolute;
    left: 50%;
    margin-left: -7px;

  }

  &.theme-blue:before {
    background: @themeBlueColor;

  }

  &.theme-green:before {
    background: @themeGreenColor;

  }

  &.active {
    background: rgba(0, 0, 0, 0.1);
  }
}

</style>


